<template>
    <div>
        <div class="sengContent">
            <span class="title">{{templateTitle}}</span>
            <el-button size="small" type="primary" @click="returnTemplateTable">返回</el-button>
        </div>
        <div class="basicInfo">
            <el-form :model="formInfo" ref="basicForm" label-width="120px" class="demo-ruleForm" >
                 <el-form-item label="消息类型：" prop="type" :rules="[{required:true,message:'请选择消息类型',trigger:'blur'}]">
                    <el-select v-model="formInfo.type" placeholder="请选择消息类型" style="width:100%;">
                        <el-option
                            v-for="(item,index) of systemMessageType"
                            :key="index"
                            :label="item.text"
                            :value="parseInt(item.value)"
                        ></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="通知方式：" prop="channel" :rules="[{required:true,message:'请选择通知方式',trigger:'blur'}]">
                    <el-checkbox-group v-model="formInfo.channel">
                        <el-checkbox :label="1">站内信</el-checkbox>
                        <el-checkbox :label="2">邮件</el-checkbox>
                        <el-checkbox :label="3">短信</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="消息标题：" prop="title" :rules="[{required:true,message:'请输入消息标题',trigger:'blur'}]">
                    <el-input v-model="formInfo.title" placeholder="请输入消息标题"></el-input>
                </el-form-item>
                <el-form-item v-if="formInfo.channel.indexOf(3) > 0" label="短信内容：" prop="smsContent" :rules="[{required:true,message:'请输入短信内容',trigger:'blur'}]">
                    <el-input type="textarea" v-model="formInfo.smsContent" placeholder="请输入短信内容，限制75个字" :autosize="{ minRows: 2, maxRows: 4 }"  maxlength="75"></el-input>
                </el-form-item>
                 <el-form-item label="消息内容：" prop="content" :rules="[{required:true,message:'请输入消息内容',trigger:'blur'}]" :show-overflow-tooltip="true">
                    <!-- <Tinymce v-model="formInfo.content" :height="300" placeholder="在这里输入文字" /> -->
                    <wangEditor id='divEditor' v-model="formInfo.content" :height="300" placeholder="在这里输入文字" ref="editorForm" />
                </el-form-item>
                <el-form-item class="center">
                    <el-button type="primary" @click="onSave" :disabled="disButton">保存</el-button>
                    <el-button  @click="returnTemplateTable">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import WangEditor from '@/components/wangEdito/index.vue'
import Tinymce from '@/components/tinymce/index.vue'
import { createTemplate, updataTemplate} from '@/api/custom/message'
export default {
    components: {
        Tinymce,
        WangEditor
    },
    props: {
        systemMessageType: Array,
        templateEditList: {
            type: Object
        },
        templateTitle: String
    },
    data() {
        return {
            disButton: false,
            formInfo:{
                channel: [ 1 ],
                content: '',
                type: '',
                title: '',
                smsContent: ''
            },
            id: '',
        }
    },
    watch: {
        templateEditList(newVal,oldVal) {
            this.formInfo = JSON.parse(JSON.stringify(newVal))
            this.id = newVal.id
        }
    },
    methods: {
        onSave() {
            this.$refs.basicForm.validate((validate) => {
                if(validate){
                    let dataText = this.$refs.editorForm.editor.txt.html().replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, '[图片]')
                    dataText = dataText.replace(/<video [^>]*src=['"]([^'"]+)[^>]*>/gi, '[视频]')
                    dataText = dataText.replace(/<\/?.+?\/?>/g, '')
                    if(this.templateTitle == '新增消息模板'){
                        createTemplate({...this.formInfo,contentDisplay: dataText}).then((res) => {
                            this.disButton = true
                            this.$emit("saveTemplate")
                        })
                        .finally(() => {
                            setTimeout(() => {
                                this.disButton = false;
                            }, 2000)
                        });
                    }else{
                        const data = {id:this.id, ...this.formInfo,contentDisplay: dataText}
                        updataTemplate(data).then((res) => {
                            this.$emit("saveTemplate")
                        })
                        .finally(() => {
                            setTimeout(() => {
                                this.disButton = false;
                            }, 2000)
                        });
                    }
                }
            })
        },
        returnTemplateTable() {
            this.$emit("returnTemplateTable")
        }
    }
}
</script>
<style lang="scss" scoped>
    .sengContent{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .title{
        color: rgb(64, 158, 255);
        font-size: 16px;
    }
    .basicInfo {
        margin-right: 20%;
        margin-left: 20%;
        margin-top: 3%;
    }
    .center{
        text-align: center;
    }
</style>
